<template>
	<div>
		<div style='height:70px;background: #E1EBFB;padding:15px 30px;display: flex;justify-content:space-between'>
			<div class='file-search'>
				<div class='file-search-home' @click='homeFile'>
					<img src="../../../../images/home.png" style='width:24px;height:24px;'>
				</div>
				<div style='width:100%;padding:6px 0;'>
					<Input v-model='file_path' class='file-search-input1' @on-enter='filepathEnter'></Input>
				</div>
				<div style='width:40px;text-align: center;cursor:pointer;padding-left: 5px;display:flex;align-items:center' @click='fileUpper'>
					<i class='iconfont icon-icon-test22' style='font-size: 24px;color:#9ea7b4'></i>
				</div>
			</div>
			<!-- 域名 -->
			<div class="domain">
				<i class='iconfont icon-yuming domain-icon'></i>
				<div class='domain-yuming'>{{domain}}</div>
				<i class='iconfont icon-edit domain-icon' @click='editDomain'></i>
			</div>
			<!-- 搜索 -->
			<div style='width:20%;text-align: right;line-height: 40px;padding:0 10px;'>
				<div style='display:flex;float:right;cursor:pointer;' @click='search' v-if='!isSearch'>
					<i class='iconfont icon-icon-test23' style='font-size:26px;color:#9ea7b4;margin-right:3px'></i>
					<span style='font-size:14px'>搜索</span>
				</div>
				<transition name="slide-fade">
				    <div style='position: relative' v-if='isSearch'>
						<Input v-model='search_keyword' class='file-search-input' placeholder="搜索" @on-blur='searchBlur' @on-enter='searchEnter' style='position: absolute;top:0;left:0'></Input>
						<i class='iconfont icon-icon-test23' style='font-size:26px;color:#9ea7b4;margin-right:3px;position: absolute;top:0;left:0'></i>
					</div>
				</transition>
			</div>
		</div>
		<div style='background: #fff;margin-top: 16px;'>
			<div class='icon-wrap' @click='hiddenContextMenu'>
				<div style='display: flex'>
					<div class='icon-refresh' @click='refresh' title='刷新'>
						<i class='iconfont icon-icon-test20' style='font-size:24px;color:#9ea7b4;'></i>
					</div>
	                <div class='btn1-select tab3-select'>
						<div class='icon-more' @click.stop='showMoreaction=!showMoreaction'>
							更多操作
							<Icon type="chevron-down" style='margin-left:8px;color:#9ea7b4;'></Icon>
						</div>
						<div class='contextmenu' v-show='showMoreaction'>
							<div class='contextmenu-row' :class='{"disclick":fileDirbg==0}' @click='nextDir(fileDir[fileDirbg-1])'>
								<div>打开</div>
								<div style='color:#C7CBD6;font-size:12px'>Enter</div>
							</div>
							<div class='contextmenu-row' :class='{"disclick":fileDirbg==0 && !selectFileArr.length}' @click='downloadFile(fileDir[fileDirbg-1])'>
								<div>下载</div>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' :class='{"disclick":fileDirbg==0}' v-if="is_iconorder" @click.stop='rename(fileDir[fileDirbg-1],fileDirbg-1)'>
								<div>重命名</div>
								<div style='color:#C7CBD6;font-size:12px'>F2</div>
							</div>
							<div class='contextmenu-row' :class='{"disclick":fileDirbg==0 && !selectFileArr.length}' @click='delFile(fileDir[fileDirbg-1])'>
								<div>删除</div>
								<div style='color:#C7CBD6;font-size:12px'>Del</div>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' :class='{"disclick":fileDirbg==0 && !selectFileArr.length}'>
								<div>创建压缩包</div>
								<div>
									<i class='iconfont icon-arrfill_l'></i>
								</div>
								<ul class='contextmenu-row-ul' @click='dirZip(fileDir[fileDirbg-1])'>
									<li>ZIP 文件</li>
								</ul>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' @click='fileInfo(fileDir[fileDirbg-1])'>
								<div>属性</div>
								<div>Alt+I</div>
							</div>
						</div>
					</div>
				</div>
				<div style='display: flex;cursor:pointer'>
					<div style='display: flex;margin-right: 12px;border:1px solid #D7DDE4;border-radius: 3px'>
						<div style='width:40px;text-align:center;height:36px;line-height: 36px' :class='{"disclick":!file_path}' @click='fileLeft' title='后退'>
							<Icon type="chevron-left" size='16' style='color:#9ea7b4;' :class='{"icon-color":file_path}'></Icon>
						</div>
						<div style='width:40px;text-align:center;line-height: 36px;border-left:1px solid #D7DDE4;' :class='{"disclick":file_paths.length==file_allpaths.length}' @click='fileRight' title='前进'>
							<Icon type="chevron-right" size='16' style='color:#9ea7b4;' :class='{"icon-color":file_paths.length!=file_allpaths.length}'></Icon>
						</div>
					</div>
					<div style='display: flex;border:1px solid #D7DDE4;border-radius: 3px'>
						<div style='width:40px;text-align:center;' :class='{"iconorder-bg":is_iconorder}' @click='iconOrder' title='图标排列'>
							<i class='iconfont icon-icon-test19' style='font-size:24px;color:#9ea7b4;'></i>
						</div>
						<div style='width:40px;text-align:center;border-left:1px solid #D7DDE4;' :class='{"iconorder-bg":!is_iconorder}' @click='listOrder' title='列表排列'>
							<i class='iconfont icon-icon-test21' style='font-size:24px;color:#9ea7b4;'></i>
						</div>
					</div>
				</div>
			</div>
			<div style='min-height:65vh'
				ref='fileWrap'
				@contextmenu.prevent.stop="showContextMenu($event)" 
				@click.prevent.stop='hiddenContextMenu'
				>
				<Upload
			        multiple
                    type="drag"
                    :action="getUrls('/home/app/file/web/uploads')"
                    :on-success="handleAddSuccess"
                    :show-upload-list="false"
                    :headers="uploadHeaders()"
                    class='uploads-wrap'>
			        <div style="height:100%;width:100%" ref='files'>
					    <div
							v-if='is_iconorder'
							class='file-flex'
				    		>
							<div style='padding:15px;margin-right: 42px' :style='{width:fileSize,height:fileSize}' @click='addFile'>
							    <div style='width:100%;height:100%;border:1px solid #E3E8EE;background: #F2F7FB;cursor:pointer;text-align: center;position: relative'>
									<Icon type="plus-round" size='40' style='position: absolute;top:50%;margin-top:-20px;left:50%;margin-left: -15px'></Icon>
								</div>
							</div>
					<!-- 图标排列 -->
					<div 
						ref='fileDdirDiv'
						class='file-dir' 
						draggable='true' 
						@dragstart='drag($event,item)'
						@drop='drop($event,item)' 
						@dragover='allowDrop($event,item)'
						@dragleave='dragleave($event,item)'
						@contextmenu.prevent.stop="fileContextMenu($event,index)" 
						v-for='(item,index) in fileDir'
						:key='item'
						@click.stop='selectFile($event,item,index)'>
						<div 
							class='file-dir-div'
							:class='{"file-dir-bg":fileDirbg==index+1 || selectFileArr.indexOf(item)>-1}' 
							:style='{width:fileSize,height:fileSize}'
							@dblclick='nextDir(item)'>
							<img v-if='item.type == "jpg" || item.type == "png" || item.type == "gif"' v-lazy="item.path" style='max-width:100%;max-height: 100%'>
							<img v-else-if='item.type == "dir"' src="../../../../images/file3.png" style='max-width:100%;max-height: 100%'>
							<img v-else src="../../../../images/file2.png" style='height:100%'>
						</div>
						<div @dblclick='rename(item,index)'>
							<Input v-show='new_name[index].editName' type='textarea' v-model='new_name[index].name' :value='item.name' @on-focus='renameFocus' @on-blur='renameBlur' :autosize="true" title='双击名称重命名' class='file-dir-name' :style='{maxWidth:fileSize}'></Input>
							<div v-show='!new_name[index].editName' title='双击名称重命名' class='file-dir-name' :style='{width:fileSize}' :class='{"file-dir-namebg":fileDirbg==index+1 || selectFileArr.indexOf(item)>-1}'>{{item.name}}</div>
						</div>
						<!-- 文件右键菜单 -->
						<div class='contextmenu' v-show='showfileMenu == index+1' :style='{left:menuLeft+"px",top:menuTop+"px"}' ref='contextMenu'>
							<div class='contextmenu-row' @click='nextDir(item)' v-show='selectFileArr.length==0'>
								<div>打开</div>
								<div style='color:#C7CBD6;font-size:12px'>Enter</div>
							</div>
							<div class='contextmenu-row' @click='downloadFile(item)'>
								<div>下载</div>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' @click='rename(item,index)' v-show='selectFileArr.length==0'>
								<div>重命名</div>
								<div style='color:#C7CBD6;font-size:12px'>F2</div>
							</div>
							<div class='contextmenu-row' @click='copy(item)'>
								<div>复制</div>
								<div style='color:#C7CBD6;font-size:12px'>Ctrl+C</div>
							</div>
							<div class='contextmenu-row' @click='cut(item)'>
								<div>剪切</div>
								<div style='color:#C7CBD6;font-size:12px'>Ctrl+X</div>
							</div>
							<div class='contextmenu-row' @click='delFile(item)'>
								<div>删除</div>
								<div style='color:#C7CBD6;font-size:12px'>Del</div>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' v-if='item.type == "zip" && !selectFileArr.length'>
								<div>解压到</div>
								<div>
									<i class='iconfont icon-arrfill_l'></i>
								</div>
								<ul class='contextmenu-row-ul' @click='nextDir(item)'>
									<li>解压到当前</li>
								</ul>
							</div>
							<div class='contextmenu-row'>
								<div>创建压缩包</div>
								<div>
									<i class='iconfont icon-arrfill_l'></i>
								</div>
								<ul class='contextmenu-row-ul' @click='dirZip(item)'>
									<li>ZIP 文件</li>
								</ul>
							</div>
							<div class='contextmenu-line' v-show='selectFileArr.length==0'></div>
							<div class='contextmenu-row' @click='fileInfo(item)' v-show='selectFileArr.length==0'>
								<div>属性</div>
								<div style='color:#C7CBD6;font-size:12px'>Alt+I</div>
							</div>
						</div>
					</div>
					<!-- 空白右键菜单 -->
					<div class='contextmenu' v-show='showMenu' :style='{left:menuLeft+"px",top:menuTop+"px"}' ref='contextMenu'>
						<div class='contextmenu-row' @click='refresh'>
							<div>刷新</div>
							<div style='color:#C7CBD6;font-size:12px'>F5</div>
						</div>
						<div class='contextmenu-row' @click='mkdir'>
							<div>新建文件夹</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row' @click='paste'>
							<div>粘贴</div>
							<div style='color:#C7CBD6;font-size:12px'>Ctrl+V</div>
						</div>
						<div class='contextmenu-row' @click='lookClipboard'>
							<div>查看剪切板</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row'>
							<div>查看</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<ul class='contextmenu-row-ul'>
								<li v-for='(item,index) in iconStyle' :key='index' @click='selectIconstyle(index)'>{{item}}
									<i v-show='selectIconStyle==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
								</li>
							</ul>
						</div>
						<div class='contextmenu-row'>
							<div>排序方式</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<div class='contextmenu-row-ul'>
								<ul>
									<li v-for='(item,index) in orderStyle1' :key='index' @click='selectOrderStyle1(index)'>{{item}}
										<i v-show='selectOrder1==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
								<div class='contextmenu-line'></div>
								<ul>
									<li v-for='(item,index) in orderStyle2' :key='index' @click='selectOrderStyle2(index)'>{{item}}
										<i v-show='selectOrder2==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
							</div>
						</div>
						<div class='contextmenu-row'>
							<div>图标大小</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<div class='contextmenu-row-ul'>
								<ul>
									<li v-for='(item,index) in iconSize' :key='index' @click='selectIconsize(index)' :style='{fontSize:item.size}'>{{item.name}}
										<i v-show='selectIcon==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
							</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row' @click='fileInfo()'>
							<div>属性</div>
							<div style='color:#C7CBD6;font-size:12px'>Alt+I</div>
						</div>
					</div>
					<div v-for='(item,index) in 10' class='file-dir' @contextmenu.prevent.stop="showContextMenu1($event,index)" :style='{width:fileSize}'>
						<div class='contextmenu' v-show='showMenu1==index+1' :style='{left:menuLeft+"px",top:menuTop+"px"}' ref='contextMenu'>
						<div class='contextmenu-row' @click='refresh'>
							<div>刷新</div>
							<div style='color:#C7CBD6;font-size:12px'>F5</div>
						</div>
						<div class='contextmenu-row' @click='mkdir'>
							<div>新建文件夹</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row' @click='paste'>
							<div>粘贴</div>
							<div style='color:#C7CBD6;font-size:12px'>Ctrl+V</div>
						</div>
						<div class='contextmenu-row' @click='lookClipboard'>
							<div>查看剪切板</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row'>
							<div>查看</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<ul class='contextmenu-row-ul'>
								<li v-for='(item,index) in iconStyle' :key='index' @click='selectIconstyle(index)'>{{item}}
									<i v-show='selectIconStyle==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
								</li>
							</ul>
						</div>
						<div class='contextmenu-row'>
							<div>排序方式</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<div class='contextmenu-row-ul'>
								<ul>
									<li v-for='(item,index) in orderStyle1' :key='index' @click='selectOrderStyle1(index)'>{{item}}
										<i v-show='selectOrder1==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									
									</li>
								</ul>
								<div class='contextmenu-line'></div>
								<ul>
									<li v-for='(item,index) in orderStyle2' :key='index' @click='selectOrderStyle2(index)'>{{item}}
										<i v-show='selectOrder2==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
							</div>
						</div>
						<div class='contextmenu-row'>
							<div>图标大小</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<div class='contextmenu-row-ul'>
								<ul>
									<li v-for='(item,index) in iconSize' :key='index' @click='selectIconsize(index)' :style='{fontSize:item.size}'>{{item.name}}
										<i v-show='selectIcon==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
							</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row' @click='fileInfo()'>
							<div>属性</div>
							<div style='color:#C7CBD6;font-size:12px'>Alt+I</div>
						</div>
					</div>
					</div>
				</div>
				<!-- 列表排列 -->
				<div 
					v-else
					@contextmenu.prevent.stop="showContextMenu" 
		    		@click.prevent.stop='hiddenContextMenu'
					style='background:#fff;position:relative;padding-bottom: 100px;text-align:center;'>
					<Row style='height:35px;line-height: 35px;background:#F2F7FB'>
						<Col span='6'>名称</Col>
						<Col span='6'>类型</Col>
						<Col span='6'>修改时间</Col>
						<Col span='6'>操作</Col>
					</Row>
					<div 
						v-for='(item,index) in fileDir'
						:key='item'
						class='list-file'
						:class='{"file-dir-bg":fileDirbg==index+1}' 
						@click.prevent.stop='hiddenListmenu($event,index)'
						@contextmenu.prevent.stop="fileContextlistMenu($event,index)" 
						@dblclick.prevent='openFile(item,index)'
						@dragstart='drag($event,item)'
						@drop='drop($event,item)' 
						@dragover='allowDrop($event,item)'
						@dragleave='dragleave($event,item)'
						style='position:relative'>
						<Row>
							<Col span='6'>
								<div style='textAlign:left;margin:10px 0;display:flex;alignItems:center;padding-left:30px'>
									<div style='width:50px;height:50px;vertical-align: middle' 
										>
										<img v-if='item.type == "jpg" || item.type == "png" || item.type == "gif"' v-lazy="item.path" style='max-width:100%;max-height: 100%'>
										<img v-else-if='item.type == "dir"' src="../../../../images/file3.png" style='max-width:100%;max-height: 100%'>
										<img v-else src="../../../../images/file2.png" style='height:100%'>
									</div>
									<div style='margin-left:10px;'>{{item.name}}</div>
		                    	</div>
							</Col>
							<Col span='6' style='line-height: 70px'>{{item.type}}&nbsp;</Col>
							<Col span='6' style='line-height: 70px'>{{format(item.mtimeMs)}}</Col>
							<Col span='6' style='position: relative'>
								<i class='iconfont icon-icon-test25' style='font-size:24px;color:#9ea7b4;cursor:pointer;line-height: 70px' @click='delFile(item)'></i>
								<i class='iconfont icon-icon-test24' style='font-size:24px;color:#9ea7b4;cursor:pointer;line-height: 70px' @click.stop="listFilemenu($event,item,index)"></i>
			                    <div class='contextmenu' v-show='showfileMenu == index+1' :style='{left:menuLeft+"px",top:menuTop+"px"}' ref='contextMenu'>
									<div class='contextmenu-row' @click='nextDir(item)'>
										<div>打开</div>
										<div style='color:#C7CBD6;font-size:12px'>Enter</div>
									</div>
									<div class='contextmenu-row' @click='downloadFile(item)'>
										<div>下载</div>
									</div>
									<div class='contextmenu-line'></div>
									<!-- <div class='contextmenu-row' @click='rename(item,index)'>
										<div>重命名</div>
										<div style='color:#C7CBD6;font-size:12px'>F2</div>
									</div> -->
									<div class='contextmenu-row' @click='copy(item)'>
										<div>复制</div>
										<div style='color:#C7CBD6;font-size:12px'>Ctrl+C</div>
									</div>
									<div class='contextmenu-row' @click='cut(item)'>
										<div>剪切</div>
										<div style='color:#C7CBD6;font-size:12px'>Ctrl+X</div>
									</div>
									<div class='contextmenu-row' @click='delFile(item)'>
										<div>删除</div>
										<div style='color:#C7CBD6;font-size:12px'>Del</div>
									</div>
									<div class='contextmenu-line'></div>
									<div class='contextmenu-row' v-if='item.type == "zip" && !selectFileArr.length'>
										<div>解压到</div>
										<div>
											<i class='iconfont icon-arrfill_l'></i>
										</div>
										<ul class='contextmenu-row-ul' @click='nextDir(item)'>
											<li>解压到当前</li>
										</ul>
									</div>
									<div class='contextmenu-row'>
										<div>创建压缩包</div>
										<div>
											<i class='iconfont icon-arrfill_l'></i>
										</div>
										<ul class='contextmenu-row-ul' @click='dirZip(item)'>
											<li>ZIP 文件</li>
										</ul>
									</div>
									<div class='contextmenu-line'></div>
									<div class='contextmenu-row' @click='fileInfo(item)'>
										<div>属性</div>
										<div style='color:#C7CBD6;font-size:12px'>Alt+I</div>
									</div>
								</div>
		                    </Col>
						</Row>
						<!-- 文件右键 -->
						<div class='contextmenu' v-show='showfilelistMenu == index+1' :style='{left:menuLeft+"px",top:menuTop+"px"}' ref='contextMenu'>
							<div class='contextmenu-row' @click='nextDir(item)'>
								<div>打开</div>
								<div style='color:#C7CBD6;font-size:12px'>Enter</div>
							</div>
							<div class='contextmenu-row' @click='downloadFile(item)'>
								<div>下载</div>
							</div>
							<div class='contextmenu-line'></div>
							<!-- <div class='contextmenu-row' @click='rename(item,index)'>
								<div>重命名</div>
								<div style='color:#C7CBD6;font-size:12px'>F2</div>
							</div> -->
							<div class='contextmenu-row' @click='copy(item)'>
								<div>复制</div>
								<div style='color:#C7CBD6;font-size:12px'>Ctrl+C</div>
							</div>
							<div class='contextmenu-row' @click='cut(item)'>
								<div>剪切</div>
								<div style='color:#C7CBD6;font-size:12px'>Ctrl+X</div>
							</div>
							<div class='contextmenu-row' @click='delFile(item)'>
								<div>删除</div>
								<div style='color:#C7CBD6;font-size:12px'>Del</div>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' v-if='item.type == "zip"'>
								<div>解压到</div>
								<div>
									<i class='iconfont icon-arrfill_l'></i>
								</div>
								<ul class='contextmenu-row-ul' :class='{"contextmenu-row-ul-left":fileMenuLeft}' @click='nextDir(item)'>
									<li>解压到当前</li>
								</ul>
							</div>
							<div class='contextmenu-row'>
								<div>创建压缩包</div>
								<div>
									<i class='iconfont icon-arrfill_l'></i>
								</div>
								<ul class='contextmenu-row-ul' :class='{"contextmenu-row-ul-left":fileMenuLeft}' @click='dirZip(item)'>
									<li>ZIP 文件</li>
								</ul>
							</div>
							<div class='contextmenu-line'></div>
							<div class='contextmenu-row' @click='fileInfo(item)'>
								<div>属性</div>
								<div style='color:#C7CBD6;font-size:12px'>Alt+I</div>
							</div>
						</div>
					</div>
					<!-- 空白右键菜单 -->
					<div class='contextmenu' v-show='showMenu' :style='{left:menuLeft+"px",top:menuTop+"px"}' ref='contextMenu' style='text-align:left'>
						<div class='contextmenu-row' @click='refresh'>
							<div>刷新</div>
							<div style='color:#C7CBD6;font-size:12px'>F5</div>
						</div>
						<div class='contextmenu-row' @click='mkdir'>
							<div>新建文件夹</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row' @click='paste'>
							<div>粘贴</div>
							<div style='color:#C7CBD6;font-size:12px'>Ctrl+V</div>
						</div>
						<div class='contextmenu-row' @click='lookClipboard'>
							<div>查看剪切板</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row'>
							<div>查看</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<ul class='contextmenu-row-ul'>
								<li v-for='(item,index) in iconStyle' :key='index' @click='selectIconstyle(index)'>{{item}}
									<i v-show='selectIconStyle==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
								</li>
							</ul>
						</div>
						<div class='contextmenu-row'>
							<div>排序方式</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<div class='contextmenu-row-ul'>
								<ul>
									<li v-for='(item,index) in orderStyle1' :key='index' @click='selectOrderStyle1(index)'>{{item}}
										<i v-show='selectOrder1==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									
									</li>
								</ul>
								<div class='contextmenu-line'></div>
								<ul>
									<li v-for='(item,index) in orderStyle2' :key='index' @click='selectOrderStyle2(index)'>{{item}}
										<i v-show='selectOrder2==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
							</div>
						</div>
						<div class='contextmenu-row'>
							<div>图标大小</div>
							<div>
								<i class='iconfont icon-arrfill_l'></i>
							</div>
							<div class='contextmenu-row-ul'>
								<ul>
									<li v-for='(item,index) in iconSize' :key='index' @click='selectIconsize(index)' :style='{fontSize:item.size}'>{{item.name}}
										<i v-show='selectIcon==index' class='iconfont icon-duigou contextmenu-row-li-select'></i>
									</li>
								</ul>
							</div>
						</div>
						<div class='contextmenu-line'></div>
						<div class='contextmenu-row' @click='fileInfo()'>
							<div>属性</div>
							<div style='color:#C7CBD6;font-size:12px'>Alt+I</div>
						</div>
					</div>
				</div>
			        </div>
			    </Upload>
				
			</div>
			
		</div>
		<!-- 上传文件 -->
        <Modal v-model="modal" width="600">
            <p slot="header">
                <span>上传文件</span>
            </p>
            <div style='margin-bottom: 24px'>
            	<Upload
			        multiple
                    type="drag"
                    :action="getUrls('/home/app/file/web/uploads')"
                    :on-success="handleAddSuccess"
                    :show-upload-list="false"
                    :headers="uploadHeaders()">
			        <div style="height:190px;padding:10px 0">
					    <div style='width:100px;height:100px;margin: 20px auto;background:rgba(16,141,233,0.1);border-radius: 50px;padding:30px'>
		                	<Icon type="ios-cloud-upload" color='#06A0FD' size='40'></Icon>
		                </div>
			            <p>点击或将文件拖拽到这里上传</p>
			        </div>
			    </Upload>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="cancel">取消</button>
                <button class='btn-sure' @click="handleAddSuccess">确认</button>
            </div>
        </Modal>
        <!-- 查看属性 -->
        <Modal v-model="show_info" width="600">
            <p slot="header">
                <span>{{fileName || '/'}}</span>
            </p>
            <div>
            	<div>位置：{{fileInfos.pathName || '/'}}</div>
            	<div>大小：{{fileInfos.size}}</div>
            	<div>包含：文件夹{{fileInfos.dirNum || 0}}个，文件{{fileInfos.fileNum || 0}}个</div>
            	<p style='margin-top: 15px'>创建时间：{{format(fileInfos.info.birthtime)}}</p>
            	<p>修改时间：{{format(fileInfos.info.ctime)}}</p>
            	<p>最后访问：{{format(fileInfos.info.atime)}}</p>
            </div>
            <div slot="footer">
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
        <!-- 查看剪切板 -->
        <Modal v-model="show_clipboard" width="600">
            <p slot="header">
                <span>查看剪切板</span>
            </p>
            <div>
            	<h3 v-if='cliboardStatus!=-1' style='margin-bottom:15px'>剪切板状态：{{cliboardStatus == 1?'复制':'剪切'}}</h3>
            	<div v-if='cliboardStatus!=-1'>
            		<div v-for='item in clipContent' :key='item'>
            			<p>文件名称：{{item}}</p>
            			<!-- <p>文件路径：{{item.path}}</p> -->
            		</div>
            	</div>
            	<div v-else>剪切板为空</div>
            </div>
            <div slot="footer">
                <button class='btn-cancel' @click="emptyClipboard">清空</button>
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
        <!-- 查看剪切板 -->
        <Modal v-model="show_preview" width="600">
            <p slot="header">
                <span>文件预览</span>
            </p>
            <div>
            	<img v-lazy="img_src" width="520" height="400">
            </div>
            <div slot="footer">
                <button class='btn-sure' @click="sure">确认</button>
            </div>
        </Modal>
        <!-- 设置域名 -->
        <Modal v-model="domain_modal" width="600">
	        <p slot="header">
	            <span>设置域名</span>
	        </p>
	        <div style='margin-bottom: 24px'>
	            <Form :label-width='50'>
                    <FormItem label='域名'>
                    	<Input v-model='yuming' placeholder='请输入域名'></Input>
                    </FormItem>
                    <Alert type="warning">
				        温馨提示
				        <br><br>
				        <p style='color:#657180;word-break: break-all;'>请将您设置的域名CNAME解析到 {{yuming}}</p>
				    </Alert>
                </Form>
	        </div>
	        <div slot="footer">
	            <button class='btn-cancel' @click="cancel">取消</button>
	            <button class='btn-sure' @click="domainSure">确认</button>
	        </div>
	    </Modal>
	    <!-- 读取文件 -->
		<div v-if='file_read' class='file-read'>
            <div class='file-read-wrap' :class='{"file-read-wrap-expand":file_expand}'>

            	<div style='height:40px;border-bottom:1px solid #e3e8ee;padding:0 20px;cursor:pointer;line-height: normal'>
            		<Icon type="document" style='font-size:24px;line-height: 40px;color:#9ea7b4' title='保存' @click.native='saveFile'></Icon>

	                <Icon type="ios-close-empty" class='file-read-iconsmall' @click.native='codeCancel'></Icon>
	                <Icon :type="file_expand ? 'arrow-shrink' : 'arrow-expand'" class='file-read-iconsmall' style='font-size:22px;margin-right: 15px' @click.native='fileExpand'></Icon>

	            </div>
	            <div style='width:100%;height:95%;background:#fff;overflow:auto;font-size:18px'>
	            	<codemirror v-model="code" :options="editorOptions"></codemirror>
	            </div>
            </div>
        </div>
	</div>
</template>
<script>
	import Vue from 'vue'
	import axios from 'axios'
	import draggable from 'vuedraggable'
	import { codemirror } from 'vue-codemirror'
     // language
      import 'codemirror/mode/javascript/javascript.js'
      // theme css
      import 'codemirror/theme/monokai.css'
      // require active-line.js
      import'codemirror/addon/selection/active-line.js'
      // styleSelectedText
      import'codemirror/addon/selection/mark-selection.js'
      import'codemirror/addon/search/searchcursor.js'
      // hint
      import'codemirror/addon/hint/show-hint.js'
      import'codemirror/addon/hint/show-hint.css'
      import'codemirror/addon/hint/javascript-hint.js'
      import'codemirror/addon/selection/active-line.js'
      // highlightSelectionMatches
      import'codemirror/addon/scroll/annotatescrollbar.js'
      import'codemirror/addon/search/matchesonscrollbar.js'
      import'codemirror/addon/search/searchcursor.js'
      import'codemirror/addon/search/match-highlighter.js'
      // keyMap
      import'codemirror/mode/clike/clike.js'
      import'codemirror/addon/edit/matchbrackets.js'
      import'codemirror/addon/comment/comment.js'
      import'codemirror/addon/dialog/dialog.js'
      import'codemirror/addon/dialog/dialog.css'
      import'codemirror/addon/search/searchcursor.js'
      import'codemirror/addon/search/search.js'
      import'codemirror/keymap/sublime.js'
      // foldGutter
      import'codemirror/addon/fold/foldgutter.css'
      import'codemirror/addon/fold/brace-fold.js'
      import'codemirror/addon/fold/comment-fold.js'
      import'codemirror/addon/fold/foldcode.js'
      import'codemirror/addon/fold/foldgutter.js'
      import'codemirror/addon/fold/indent-fold.js'
      import'codemirror/addon/fold/markdown-fold.js'
      import'codemirror/addon/fold/xml-fold.js'

	export default{
		components:{
			draggable,
			codemirror
		},
		data(){
			return{
				root_path:'',
				file_paths:[],
				file_allpaths:[],
				modal:false,
				show_info:false,
				fileInfos:{
					info:{}
				},//属性
				path_name:'',
				fileName:'',
				show_clipboard:false,//查看剪切板
				cliboardStatus:-1,
				clipContent:[],
				showMoreaction:false,//更多操作
				is_iconorder:true,
				showMenu:false,
				showMenu1:0,
				showfileMenu:0,
				showfilelistMenu:0,
				fileDir:[],
				file_path:'',
				menuLeft:0,
				menuTop:0,
				isSearch:false,
				search_keyword:'',
				//查看图标排列方式
				iconStyle:['图标排列','列表排列'],
				selectIconStyle:0,
				//排序方式
				orderStyle1:['名称','类型','大小','修改时间'],
				orderStyle2:['递增','递减'],
				selectOrder1:0,
				selectOrder2:0,
				//图标大小
				iconSize:[
					{name:'超小',size:'10px',width:'80px'},
					{name:'小图标',size:'12px',width:'90px'},
					{name:'中图标',size:'14px',width:'100px'},
					{name:'大图标',size:'16px',width:'110px'},
					{name:'超大图标',size:'18px',width:'120px'},
				],
				fileSize:'110px',
				selectIcon:3,
				fileMenuLeft:false,
				new_name:[],
				fileDirbg:0,
				fileDirbgItem:{},
				selectFileArr:[],//文件多选
                // 文件预览
                show_preview:false,
                img_src:'',
                //域名
                domain_modal:false,
                domain:'',
                yuming:'',
                //文件读取
                file_read:false,
                file_save:'',//读取文件的路径
                code:'',
                editorOptions: {
	              	tabSize: 4,
	                styleActiveLine: false,
	                lineNumbers: true,
	                lineWrapping:true,
	                styleSelectedText: false,
	                line: true,
	                foldGutter: true,
	                gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
	                highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true },
	                mode: 'text/javascript',
	                // hint.js options
	                hintOptions:{
	                  // 当匹配只有一项的时候是否自动补全
	                  completeSingle: false
	                },
	                //快捷键 可提供三种模式 sublime、emacs、vim
	                keyMap: "sublime",
	                matchBrackets: true,
	                showCursorWhenSelecting: true,
	                theme: "xq-light",
	                extraKeys: { "Ctrl": "autocomplete" }
	        	},
	        	file_expand:false
			}
		},
		created(){
			this.getDomain();
			// this.$bus.emit('updateMainMenuActive',this.$route.fullPath);
			this.$bus.on('select_submenu',res => {
				if(res){
					this.file_path = '';
					this.getFiles();
				}
			})
			if(localStorage.clipStatus!=-1){
                // this.$localStorage.remove('copyName')
                this.$localStorage.remove('copyPath')
                this.$localStorage.set('clipStatus',-1)
           	}

			document.onkeydown = (e)=>{
				let keycode = window.event.keyCode;
				if(this.$route.fullPath != '/home/file/web' || this.domain_modal){
					return;
				}

				if(this.file_read){
					//保存
					if(keycode==83 && e.ctrlKey ){   //同时按下Ctrl+S
						event.preventDefault();
						this.saveFile()
	         		}
	         		return
				}
				
				//刷新F5
				if(keycode == 116){
					event.preventDefault();
					this.fileDir = []
					this.getFiles();
				}
				//重命名F2
				if(keycode == 113){
					event.preventDefault();
					if(this.fileDirbg){
						this.rename(this.fileDir[this.fileDirbg-1],this.fileDirbg-1)
					}
				}
				//打开Enter
				if(keycode == 13){
					event.preventDefault();
					if(this.fileDirbg){
						this.nextDir(this.fileDir[this.fileDirbg-1],this.fileDirbg-1)
					}
				}
				//del
				if(keycode == 46){
					event.preventDefault();
					if(this.fileDirbg){
						this.delFile(this.fileDir[this.fileDirbg-1])
					}
				}
				//复制
				if(keycode==67 && e.ctrlKey ){   //同时按下Ctrl+c
					event.preventDefault();
					let filePath = [];
					let file_paths = '';
					if(this.selectFileArr.length){
						for(let key in this.selectFileArr){
							filePath.push(this.selectFileArr[key].filePath)
						}
						file_paths = filePath.join();
					}else if(this.fileDirbg){
						file_paths = this.fileDir[this.fileDirbg-1].filePath;
					}else{
						return
					}
					this.cliboardStatus = 1;
					this.$localStorage.set('clipStatus',this.cliboardStatus)
					this.$localStorage.set('copyPath',file_paths)
					this.$Message.success('已复制到剪切板')
					this.showfileMenu = 0;
					this.showfilelistMenu = 0;
         		}
         		//剪切
         		if(keycode==88 && e.ctrlKey ){   //同时按下Ctrl+X
					event.preventDefault();
					let filePath = [];
					let file_paths = '';
					if(this.selectFileArr.length){
						for(let key in this.selectFileArr){
							filePath.push(this.selectFileArr[key].filePath)
						}
						file_paths = filePath.join();
					}else if(this.fileDirbg){
						file_paths = this.fileDir[this.fileDirbg-1].filePath;
					}else{
						return
					}
				
					this.$localStorage.set('clipStatus',0)
					this.$localStorage.set('copyPath',file_paths)
					this.$Message.success('已剪切到剪切板')
					this.showfileMenu = 0;
					this.showfilelistMenu = 0;
         		}
         		//粘贴
         		if(keycode==86 && e.ctrlKey ){   //同时按下Ctrl+v
					event.preventDefault();
					if(localStorage.clipStatus == -1){
						this.$Message.warning('剪切板为空')
					}
					//复制
					if(localStorage.clipStatus == 1){
						this.fetch('/home/app/file/copy',{
							fileName:localStorage.copyPath,
							aimsFile:this.file_path
						}).then(res=>{
							if(res&&res.data.data&&res.data.code){
								this.getFiles()
							}
						})
					}
					//剪切
					if(localStorage.clipStatus == 0){
						this.fetch('/home/app/file/move',{
							file:localStorage.copyPath,
							aimsFile:this.file_path
						}).then(res=>{
							if(res&&res.data.code&&res.data.data){
								this.getFiles();
								this.$localStorage.set('copyPath',res.data.data.filePath)
							}
						})
					}
         		}
         		//属性alt+i
         		if(keycode==73 && e.altKey ){   
					event.preventDefault();

					this.path_name = '';
					if(this.fileDirbg){
						this.path_name = this.fileDir[this.fileDirbg-1].filePath;
						this.fileName = this.fileDir[this.fileDirbg-1].name;
					}else{
						this.path_name = this.file_path;
						this.fileName = this.file_path.split('/').pop()
					}

					this.fetch('/home/app/file/fileInfo',{
						pathName:this.path_name
					}).then(res=>{
						if(res&&res.data.data&&res.data.code){
							this.show_info = true;
							this.fileInfos = res.data.data;
							this.showMenu = false;
							this.showMenu1 = 0;
						}
					})
         		}
         		
			}
			this.getFiles();

			// document.onmousedown = ()=> { 
			// 	if(this.$route.fullPath != '/home/file/web'){
			// 		return;
			// 	}
				

		 //    let selList = []; 

		 //    // let fileNodes = document.getElementsByTagName("div"); 
		 //    let fileNodes = this.$refs.fileDdirDiv; 

		 //    for ( let i = 0; i < fileNodes.length; i++) { 

		 //      if (fileNodes[i].className.indexOf("file-dir") != -1) { 

		 //        fileNodes[i].className = "file-dir"; 

		 //        selList.push(fileNodes[i]); 

		 //      } 

		 //    } 

		 //    let isSelect = true; 

		 //    let evt = window.event || arguments[0]; 

		 //    let startX = (evt.x || evt.clientX); 

		 //    let startY = (evt.y || evt.clientY); 

		 //    let selDiv = document.createElement("div"); 

		 //    selDiv.style.cssText = "position:absolute;width:0px;height:0px;font-size:0px;margin:0px;padding:0px;border:1px dashed #0099FF;background-color:#C3D5ED;z-index:1000;filter:alpha(opacity:60);opacity:0.6;display:none;"; 

		 //    selDiv.id = "selectDiv"; 
		 //    // document.body.appendChild(selDiv); 
		 //    this.$refs.fileWrap.appendChild(selDiv)

		 //    selDiv.style.left = startX + "px"; 

		 //    selDiv.style.top = startY + "px"; 

		 //    let _x = null; 

		 //    let _y = null; 

		 //    this.clearEventBubble(evt); 

		 //    document.onmousemove = ()=> { 
		 //    	console.log('move')
		 //    	if(this.$route.fullPath != '/home/file/web'){
			// 		return;
			// 	}
				

		 //      evt = window.event || arguments[0]; 

		 //      if (isSelect) { 

		 //        if (selDiv.style.display == "none") { 

		 //          selDiv.style.display = ""; 

		 //        } 

		 //        _x = (evt.x || evt.clientX); 

		 //        _y = (evt.y || evt.clientY); 

		 //        selDiv.style.left = Math.min(_x, startX) + "px"; 

		 //        selDiv.style.top = Math.min(_y, startY) + "px"; 

		 //        selDiv.style.width = Math.abs(_x - startX) + "px"; 

		 //        selDiv.style.height = Math.abs(_y - startY) + "px"; 

		 //        // ---------------- 关键算法 ---------------------  
		 //        let _l = selDiv.offsetLeft, _t = selDiv.offsetTop; 

		 //        let _w = selDiv.offsetWidth, _h = selDiv.offsetHeight; 

		 //        let vl = this.$refs.files.getBoundingClientRect().left;

		 //        let vt = this.$refs.files.getBoundingClientRect().top;

		 //        for ( let i = 0; i < selList.length; i++) { 

		 //          let sl = selList[i].offsetWidth + selList[i].offsetLeft + vl; 

		 //          let st = selList[i].offsetHeight + selList[i].offsetTop + vt; 

		 //          if (sl > _l && st > _t && selList[i].offsetLeft + vl < _l + _w && selList[i].offsetTop + vt < _t + _h) { 
		 //            if (selList[i].firstElementChild.className.indexOf("file-dir-bg") == -1) { 

			// 			let selectIndex = this.selectFileArr.indexOf(this.fileDir[i]);
			// 			if(selectIndex>-1){
			// 				this.selectFileArr.splice(selectIndex,1)
			// 			}else{
			// 				this.selectFileArr.push(this.fileDir[i])
			// 			}

		 //              // selList[i].firstElementChild.className = selList[i].firstElementChild.className + " file-dir-bg";
		 //              // selList[i].nextElementSibling.firstChild.nextElementSibling.firstChild.className = selList[i].nextElementSibling.firstChild.nextElementSibling.firstChild.className + " file-dir-namebg"; 

		 //            } 

		 //          } else { 

		 //            if (selList[i].firstElementChild.className.indexOf("file-dir-bg") != -1) { 

		 //              	// selList[i].firstElementChild.className = "file-dir-div"; 
		 //              	// selList[i].nextElementSibling.firstChild.nextElementSibling.firstChild.className =  " file-dir-name";

		 //              	this.selectFileArr.splice(this.fileDir[i],1)

		 //            } 

		 //          } 

		 //        } 

		 //      } 

		 //      this.clearEventBubble(evt); 

		 //    } 

		 //    document.onmouseup = ()=> { 
		 //    	if(this.$route.fullPath != '/home/file/web'){
			// 		return;
			// 	}

		 //      isSelect = false; 

		 //      if (selDiv) { 

		 //        this.$refs.fileWrap.removeChild(selDiv)

		 //        // this.showSelDiv(this.selectFileArr); 
		 //        console.log(this.selectFileArr)
		 //      } 

		 //      selList = null, _x = null, _y = null, selDiv = null, startX = null, startY = null, evt = null; 

		 //    } 

		 //  } 
		},
		methods:{
			clearEventBubble(evt) { 

			  if (evt.stopPropagation) 

			    evt.stopPropagation(); 

			  else 

			    evt.cancelBubble = true; 

			  if (evt.preventDefault) 

			    evt.preventDefault(); 

			  else 

			    evt.returnValue = false; 

			}, 
			showSelDiv(arr) { 
				this.selectFileArr = [];

			  for ( let i = 0; i < arr.length; i++) { 

			    if (arr[i].firstElementChild.className.indexOf("file-dir-bg") != -1) { 

			      // this.selectFileArr.push(this.fileDir[i])

			    } 

			  } 
			  // console.log(this.selectFileArr)

			},
			drag(event,item){
				// this.dragFile = item;
				
				// event.target.style.border = "1px dotted #06a0fd";
				this.dragFile = [];
				this.drag_files = '';
				if(this.selectFileArr.length){
					for(let key in this.selectFileArr){
						this.dragFile.push(this.selectFileArr[key].filePath)
					}
					this.drag_files = this.dragFile.join();
				}else{
					this.drag_files = item.filePath;
				}

				
			},
			drop(event,item){
				event.preventDefault();
				if(item.type == 'zip' || item.type == 'png' || item.type == 'jpg'){
					return;
				}
				if(this.drag_files == item.filePath){
					return
				}
				// event.target.style.border = "";
				this.fetch('/home/app/file/move',{
					file:this.drag_files,
					aimsFile:item.filePath
				}).then(res=>{
					if(res&&res.data.code&&res.data.data){
						this.getFiles();
					}
				})
			},
			allowDrop(event,item){
				event.preventDefault();
				// console.log(event.target.className)
				// event.target.style.border = "1px dotted #06a0fd";
			},
			dragleave(event,item){
				event.target.style.border = "";
			},
			getFiles(){
				this.fetch('/home/app/file/dirList',{
					fileName:this.file_path
				}).then((res)=>{
					if(res&&res.data.data&&res.data.code){
						if(!this.file_path){
							this.root_path = res.data.data.pathName;
						}
						this.fileDir = res.data.data.dirList;
						this.file_path = res.data.data.pathName;
						this.new_name = [];
						for(let key in this.fileDir){
							this.new_name.push({name:this.fileDir[key].name,editName:false})
						}
						
					}else{
						this.fileDir = [];
						this.$Message.warning('暂无数据')
					}
				})
			},
			homeFile(){
				this.file_path = '';
				this.file_paths = [];
				this.file_allpaths = [];
				this.getFiles();
			},
			filepathEnter(){
				this.getFiles()
			},
			//上层文件
			fileUpper(){
				if(!this.file_path){
					return
				}
				let arr = this.file_path.split('/');
				arr.pop();
				this.file_paths = arr;
				this.file_path = arr.join('/');
				this.getFiles();
			},
			//获取域名
			getDomain(){
				this.fetch('/home/app/file/web/domain').then(res=>{
					if(res&&res.data.data){
						this.domain = res.data.data.name;
						this.dominId = res.data.data.id;
					}else{
						this.domain = localStorage.appid + '.dev.qingful.com'
					}
				})
			},
			//设置域名
			editDomain(){
				this.domain_modal = true;
				this.yuming = this.domain;
			},
			domainSure(){
				if(!this.yuming){
					this.$Message.warning('请输入域名')
					return
				}
				this.fetch('/home/app/file/web/domain',{
					name:this.yuming,
					id:this.dominId
				}).then(res=>{
					if(res&&res.data.data){
						this.domain_modal = false;
						this.getDomain();
					}
				})
			},
			//后退
			fileLeft(){
				if(this.file_path){
					let arr = this.file_path.split('/');
					arr.pop();
					this.file_paths = arr;
					this.file_path = arr.join('/');
					this.getFiles();
				}
			},
			//前进
			fileRight(){
				if(this.file_paths.length!=this.file_allpaths.length){
					this.file_path = this.file_allpaths[this.file_paths.length];
					this.file_paths.push(this.file_path)
					this.getFiles()
				}
			},
			//搜索
			search(){
				this.isSearch = true;
			},
			searchBlur(){
				this.isSearch =false;
				this.search_keyword = '';
			},
			searchEnter(){
				this.fetch('/home/app/file/dirList',{
					keyword:this.search_keyword,
					fileName:this.file_path
				}).then(res=>{
					if(res&&res.data.code&&res.data.data){
						this.fileDir = res.data.data.dirList;
						if(this.fileDir.length){
							this.file_path = res.data.data.pathName;
						}else{
							this.$Message.warning('暂无数据')
						}
						
					}else{
						this.$Message.warning('暂无数据')
					}
				})
			},
			getUrls(url) {
		        if (url) {
		            return axios.defaults.baseURL + url + '?pathName=' + this.file_path;
		        }
		        return "";
		    },
			//上传文件
			addFile(){
				this.modal = true;
			},
			handleAddSuccess(res){
                if(res.code){
                    this.modal = false;
                    this.getFiles();
                }
                else{
                	this.$Message.warning(res.data)
                }
            },
			cancel(){
                this.modal = false;
                this.filename_modal = false;
                this.domain_modal = false;
			},
			sure(){
				this.modal = false;
				this.show_info = false;
				this.show_clipboard = false;
				this.show_preview = false;
			},
			//左键单击选中文件
			selectFile(event,item,index){
				this.showMoreaction = false;
				if(event.ctrlKey){
					if(this.fileDirbg){
						this.fileDirbg = 0;
						this.selectFileArr.push(this.fileDirbgItem)
					}
					let selectIndex = this.selectFileArr.indexOf(item);
					if(selectIndex>-1){
						this.selectFileArr.splice(selectIndex,1)
					}else{
						this.selectFileArr.push(item)
					}
				}else{
					this.fileDirbg = index+1;
					this.fileDirbgItem = item;
					this.selectFileArr = [];
				}
			},
            //空白菜单
			showContextMenu(e){
				this.showMenu = true;
				this.showMenu1 = 0;
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
				let x = e.offsetX,
				    y = e.offsetY, 
					vw = e.currentTarget.getBoundingClientRect().width, 
					vh = e.currentTarget.getBoundingClientRect().height;

				this.menuLeft =  (x + 298) > vw ? (vw - 298) : x;
				this.menuTop =  (y + 330) > vh ? (vh - 330) : y;
				
			},
			showContextMenu1(e,index){
				this.showMenu = false;
				this.showMenu1 = index+1;
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
				// this.menuLeft =  e.offsetX;
				// this.menuTop =  e.offsetY;
				let x = e.offsetX,
				    y = e.offsetY, 
					vw = e.currentTarget.getBoundingClientRect().width, 
					vh = e.currentTarget.getBoundingClientRect().height;

				this.menuLeft =  (x + 298) > vw ? (vw - 298) : x;
				this.menuTop =  (y + 330) > vh ? (vh - 330) : y;
				this.selectFileArr = [];

			},
			//文件菜单
			fileContextMenu(e,index){
				this.fileDirbg = index+1;
				this.showfileMenu = index+1;
				this.showMenu = false;
				this.showMenu1 = 0;
				let x = e.offsetX,
				    y = e.offsetY, 
					vr = e.currentTarget.getBoundingClientRect().right, 
					vl = e.currentTarget.getBoundingClientRect().left,
					vw = this.$refs.files.getBoundingClientRect().width, 
					vh = this.$refs.files.getBoundingClientRect().height,
					l = this.$refs.files.getBoundingClientRect().left;
				this.menuLeft =  (vr - l + 170) > vw ? (x -170) : x;
				this.menuTop =  y;
			},
			//隐藏右键菜单
			hiddenContextMenu(e){
				if(e.button == 0){
					this.fileDirbg = 0;
					this.showMoreaction = false;
					this.showMenu = false;
					this.showMenu1 = 0;
					this.showfileMenu = 0;
					this.showfilelistMenu = 0;

					for(let key in this.new_name){
						this.new_name[key].editName = false;
					}
					
				}
				this.selectFileArr = [];
				
			},
			//刷新
			refresh(){
				this.fileDir = []
				this.getFiles();
				this.showMenu = false;
				this.showMenu1 = 0;
			},
			//创建文件夹
			mkdir(){
				this.showMenu = false;
				this.showMenu1 = 0;

				this.fetch('/home/app/file/mkdir',{
					dir_name:'新建文件夹',
					dir_path:this.file_path
				}).then(res=>{
					if(res&&res.data.code&&res.data.data){
						this.getFiles()
					}
				})
			},
			//查看图标排列
			selectIconstyle(index){
				this.selectIconStyle = index;
				if(index==0){
					this.is_iconorder = true;
				}else{
					this.is_iconorder = false;
				}
				this.showMenu = false;
				this.showMenu1 = 0;
			},
			//选择排序方式
			selectOrderStyle1(index){
				this.selectOrder1 = index;
				//名称排序
				if(index == 0){
					if(this.selectOrder2==0){
						this.fileDir.sort(this.compareName('name'))
					}else{
						this.fileDir.sort(this.compareName('name')).reverse()
					}
					
				}
				//类型
				if(index == 1){
					if(this.selectOrder2==0){
						this.fileDir.sort(this.compareType('type'))
					}else{
						this.fileDir.sort(this.compareType('type')).reverse()
					}
					
				}
				//大小
				if(index == 2){
					if(this.selectOrder2==0){
						this.fileDir.sort(this.compareSize('storage'))
					}else{
						this.fileDir.sort(this.compareSize('storage')).reverse()
					}
					
				}
				//修改时间
				if(index == 3){
					if(this.selectOrder2==0){
						this.fileDir.sort(this.compareTime('mtimeMs'))
					}else{
						this.fileDir.sort(this.compareTime('mtimeMs')).reverse()
					}
					
				}
				this.new_name = [];
				for(let key in this.fileDir){
					this.new_name.push({name:this.fileDir[key].name,editName:false})
				}
			},
			compareName(name){
		      return (a,b)=>{
		        return (a.name).localeCompare(b.name);
		      }
		    },
		    compareType(type){
		      return (a,b)=>{
		        return (a.type).localeCompare(b.type);
		      }
		    },
		    compareTime(mtimeMs){
		      return (a,b)=>{
		        return a.mtimeMs - b.mtimeMs;
		      }
		    },
		    compareSize(storage){
		      return (a,b)=>{
		        return a.storage - b.storage;
		      }
		    },
		    //递增递减
			selectOrderStyle2(index){
				this.selectOrder2 = index;
				if(index == 0){
					if(this.selectOrder1 == 0){
						this.fileDir.sort(this.compareName('name'))
					}
					if(this.selectOrder1 == 1){
						this.fileDir.sort(this.compareType('type'))
					}
					if(this.selectOrder1 == 2){
						this.fileDir.sort(this.compareSize('storage'))
					}
					if(this.selectOrder1 == 3){
						this.fileDir.sort(this.compareTime('mtimeMs'))
					}
				}else{
					if(this.selectOrder1 == 0){
						this.fileDir.sort(this.compareName('name')).reverse()
					}
					if(this.selectOrder1 == 1){
						this.fileDir.sort(this.compareType('type')).reverse()
					}
					if(this.selectOrder1 == 2){
						this.fileDir.sort(this.compareSize('storage')).reverse()
					}
					if(this.selectOrder1 == 3){
						this.fileDir.sort(this.compareTime('mtimeMs')).reverse()
					}
				}
				this.new_name = [];
				for(let key in this.fileDir){
					this.new_name.push({name:this.fileDir[key].name,editName:false})
				}
			},
			//选择大小图标
			selectIconsize(index){
				this.selectIcon = index;
				this.fileSize = this.iconSize[index].width;
				this.showMenu = false;
				this.showMenu1 = 0;
			},
			//重命名
			rename(item,index){
				this.new_name.forEach((val,i) => {
					if(index == i){
						val.editName = true;
					}else{
						val.editName = false;
					}
				})
				// if(!this.fileDirbg){
				// 	return;
				// }
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
				this.showMoreaction = false;	// 关闭更多操作弹窗
				this.savepath = item.filePath;
				this.old_name = item.name;
				this.Index = index;
			},
			renameFocus(item,index){},
			renameBlur(){
				this.fileDirbg = 0;
				
				if(this.new_name.length){
					this.new_name[this.Index].editName = false;
				}
				if(this.old_name == this.new_name[this.Index].name){
					return;
				}
				this.fetch('/home/app/file/web/rename',{
					oldName:this.savepath,
					newName:this.new_name[this.Index].name
				}).then(res=>{
					if(res&&res.data.code&&res.data.data){
						
						this.$Message.success('重命名成功')
						this.getFiles();
					}else {
						this.new_name[this.Index].name = this.savepath;
					}
				})
			},
			openFile(item,index){
				this.fileDirbg = index + 1;
				this.nextDir(item)
			},
			//双击文件
			nextDir(item){
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
				if(!this.fileDirbg){
					return
				}
				
				if(!this.file_path){
					this.file_allpaths = [];
				}
				//文件夹
				if(item.type == 'dir'){
					this.file_paths.push(item.filePath);
					this.file_allpaths.push(item.filePath);
					this.fetch('/home/app/file/dirList',{
						fileName:item.path,
						// pathName:item.path
					}).then((res)=>{
						if(res&&res.data.data){
							this.fileDirbg = 0;
							this.fileDir = res.data.data.dirList;
							this.file_path = res.data.data.pathName;
							this.new_name = [];
							for(let key in this.fileDir){
								this.new_name.push({name:this.fileDir[key].name,editName:false})
							}
						}
					})
				}else if(item.type == 'zip'){		//解压
					this.fetch('/home/app/file/unzip',{
						zip_path:item.filePath
					}).then((res)=>{
						if(res&&res.data.data){
							this.getFiles()
							this.showfileMenu = 0;
						}
					})
				}else if(item.type == 'gif' || item.type == 'png' || item.type == 'jpg'){
					this.show_preview = true;
					this.img_src = item.path;
				}else{
					this.file_save = item.path;
					this.fetch('/home/app/file/web/readFile',{
						filePath:item.path
					}).then((res)=>{
						if(res&&res.data.data){
							this.fileDirbg = 0;
							this.file_read = true;
							this.code = res.data.data;
						}
					})
				}
			},
			//删除文件
			delFile(item){
				let filepaths = [];
				let file_paths = '';
				if(this.selectFileArr.length){
					for(let key in this.selectFileArr){
						filepaths.push(this.selectFileArr[key].filePath)
					}
					file_paths = filepaths.join()
				}else{
					file_paths = item.filePath
				}
				this.$Modal.confirm({
                    title: '提示',
                    content: '<p>确定删除吗</p>',
                    onOk: () => {
                        this.fetch('/home/app/file/remove',{
							fileName:file_paths
						}).then(res=>{
							if(res&&res.data.code&&res.data.data){
								this.fileDirbg = 0;
								this.getFiles()
								this.showfileMenu = 0;
								this.showfilelistMenu = 0;
							}
						})
                    }
                });
			},
			//压缩文件
			dirZip(item){
				let filepaths = [];
				let file_paths = '';
				if(this.selectFileArr.length){
					for(let key in this.selectFileArr){
						filepaths.push(this.selectFileArr[key].filePath)
					}
					file_paths = filepaths.join()
				}else{
					file_paths = item.filePath
				}

				this.fetch('/home/app/file/dir_zip',{
					path_name:file_paths
				}).then(res=>{
					if(res&&res.data.data){
						this.getFiles()
						this.showfileMenu = 0;
						this.showfilelistMenu = 0;
						this.selectFileArr = [];
						this.fileDirbg = 0;
					}
				})
				
			},
			//下载
			downloadFile(item){
				let filepaths = [];
				let file_paths = '';
				if(this.selectFileArr.length){
					for(let key in this.selectFileArr){
						filepaths.push(this.selectFileArr[key].filePath)
					}
					file_paths = filepaths.join()
				}else{
					file_paths = item.filePath
				}
				window.open(axios.defaults.baseURL + '/home/app/file/download?token='+axios.defaults.headers.common['Token']+'&baastoken='+axios.defaults.headers.common['BaasToken']+'&fileName='+file_paths)
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
				this.showMoreaction = false;	// 关闭更多操作弹窗
			},
			//查看属性
			fileInfo(item){
				this.path_name = '';
				if(item){
					this.path_name = item.filePath;
					this.fileName = item.name;
				}else{
					this.path_name = this.file_path;
					this.fileName = this.file_path.split('/').pop()
				}
				
				this.fetch('/home/app/file/fileInfo',{
					pathName:this.path_name
				}).then(res=>{
					if(res&&res.data.data&&res.data.code){
						this.show_info = true;
						this.fileInfos = res.data.data;

						this.showMenu = false;
						this.showMenu1 = 0;
						this.showfileMenu = 0;
						this.showfilelistMenu = 0;
					}
				})
			},
			//图标排列
			iconOrder(){
				this.is_iconorder = true;
				this.selectIconStyle = 0;
			},
			//列表排列
			listOrder(){
				this.is_iconorder = false;
				this.selectIconStyle = 1;
			},
			//查看剪切板
			lookClipboard(){
				this.show_clipboard = true;
				this.cliboardStatus = localStorage.clipStatus;
				this.clipContent = localStorage.copyPath.split(',');
			},
			//清空剪切板
			emptyClipboard(){
				// this.$localStorage.remove('copyName')
				this.$localStorage.remove('copyPath')
				this.show_clipboard = false;
				this.cliboardStatus = -1;
				this.$localStorage.set('clipStatus',this.cliboardStatus)
			},
			//复制
			copy(item){
				let filePath = [];
				let file_paths = '';
				if(this.selectFileArr.length){
					for(let key in this.selectFileArr){
						console.log(this.selectFileArr[key])
						filePath.push(this.selectFileArr[key].filePath)
					}

					file_paths = filePath.join();
				}else{
					file_paths = item.filePath;
				}
				this.cliboardStatus = 1;
				this.$localStorage.set('clipStatus',this.cliboardStatus)
				this.$localStorage.set('copyPath',file_paths)
				this.$Message.success('已复制到剪切板')
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
			},
			//剪切
			cut(item){
					let filePath = [];
					let file_paths = '';
					if(this.selectFileArr.length){
						for(let key in this.selectFileArr){
							filePath.push(this.selectFileArr[key].filePath)
						}

						file_paths = filePath.join();
					}else{
						file_paths = item.filePath;
					}
				
					this.cliboardStatus = 0;
					this.$localStorage.set('clipStatus',this.cliboardStatus)
					this.$localStorage.set('copyPath',file_paths)
					// this.$localStorage.set('copyName',item.name)
					this.$Message.success('已剪切到剪切板')
					this.showfileMenu = 0;
					this.showfilelistMenu = 0;
			},
			//粘贴
			paste(){
				if(localStorage.clipStatus == -1){
					this.$Message.warning('剪切板为空')
				}
				//复制
				if(localStorage.clipStatus == 1){
					this.fetch('/home/app/file/copy',{
						fileName:localStorage.copyPath,
						aimsFile:this.file_path
					}).then(res=>{
						if(res&&res.data.data&&res.data.code){
							this.getFiles()
						}
					})
				}
				//剪切
				if(localStorage.clipStatus == 0){
					this.fetch('/home/app/file/move',{
						file:localStorage.copyPath,
						aimsFile:this.file_path
					}).then(res=>{
						if(res&&res.data.code&&res.data.data){
							this.getFiles();
							this.$localStorage.set('copyPath',res.data.data.filePath)
						}
					})
				}
			},
			
			listFilemenu(e,item,index){
				this.fileDirbg = index+1;
				this.showfileMenu = index+1;
				this.showMenu = false;
				this.showMenu1 = 0;
				this.showMoreaction = false;	// 关闭更多操作弹窗
				let x = e.clientX,
				    y = e.clientY, 
					html = document.documentElement, 
					vx = html.clientWidth , 
					vy = html.clientHeight;
				
				this.menuLeft =  e.offsetX - 175;
				this.menuTop =  e.offsetY;
			},
			hiddenListmenu(e,index){
				this.fileDirbg = index+1;
				this.showfileMenu = 0;
				this.showfilelistMenu = 0;
				this.showMoreaction = false;	// 关闭更多操作弹窗
			},
			fileContextlistMenu(e,index){
				this.fileMenuLeft = false;
				this.fileDirbg = index+1;
				this.showfilelistMenu = index+1;
				this.showMenu = false;
				this.showMenu1 = 0;

				let x = e.clientX,
				    y = e.clientY, 
				    el = e.currentTarget.getBoundingClientRect().left,
				    et = e.currentTarget.getBoundingClientRect().top,
				    vw = this.$refs.files.getBoundingClientRect().width, 
					vh = this.$refs.files.getBoundingClientRect().height;
				
				this.menuLeft =  (x - el + 170 > vw) ? (x - el - 170) : (x - el);
				this.menuTop =  y -et;
				if(x - el + 170 > vw){
					this.fileMenuLeft = true;
				}
				
			},
			//保存文件
			saveFile(){
				this.fetch('/home/app/file/web/writeFile',{
					filePath:this.file_save,
					data:this.code
				}).then((res)=>{
					if(res&&res.data.code){
						this.file_read = false;
						this.file_save = '';
						this.$Message.success('保存成功')
					}
				})
			},
			codeCancel(){
				this.file_read = false;
				this.file_save = '';
				this.file_expand = false;
			},
			//全屏
			fileExpand(){
				this.file_expand = !this.file_expand;
			}
			
		}
	}
</script>
<style type="text/css" scoped>
	.file-search{
		width:50%;
		height:40px;
		background: #fff;
		border-radius: 3px;
		display: flex;
		margin-right:20px
	}
	.file-search-home{
		width:40px;
		text-align: center;
		padding:8px 0;
		cursor:pointer
	}
	.file-search-input1{
		width:100%;
		height:28px;
		border-left:1px solid #D7DDE4;
		border-right:1px solid #D7DDE4;
		/*padding:0 10px;*/
		color:#464C5B;
	}

	.domain{
		width:30%;
		background:#fff;
		padding:0 5px;
		border-radius:3px;
		margin-right:15px;
		display:flex
	}
	.domain-yuming{
		width:100%;
		height:28px;
		line-height: 28px;
		margin: 6px 5px;
		border-right:1px solid #D7DDE4;
		text-overflow:ellipsis;
		white-space: nowrap;
		overflow: hidden
	}
	.domain-icon{
		font-size: 26px;
		color:#9ea7b4;
		cursor:pointer
	}

	.icon-wrap{
		padding:15px 30px;
		border-bottom: 1px solid #e3e8ee;
		display: flex;
		justify-content:space-between
	}
	.icon-refresh{
		width:40px;
		height: 36px;
		line-height:36px;
		border:1px solid #D7DDE4;
		border-radius: 3px;
		text-align:center;
		margin-right: 12px;
		cursor:pointer
	}
	.icon-refresh:active,
	.icon-more:active{
		background:#F0F5FD
	}
	.icon-more{
		height: 36px;
		border:1px solid #D7DDE4;
		border-radius: 3px;
		line-height: 36px;
		padding:0 10px;
		cursor:pointer;
	}

	.iconorder-bg{
		background:#F0F5FD
	}
	.file-dir{
		text-align: center;
		margin-right: 42px;
		/*margin-bottom: 20px;*/
		position: relative;
	}
	.file-dir-div{
		width:110px;
		height: 110px;
		border-radius: 3px;
		padding:21px 14px
	}
	.file-dir-bg{
		/*background:#F2F7FB;*/
		background:#ebf7ff !important;
	}
	.file-dir-namebg{
		background:#06A0FD;
		color:#fff!important;
		border-radius: 3px;
	}
	.file-dir .file-dir-div:hover{
		background:#F2F7FB;
	}
	.file-dir-name{
		max-width:110px;
		margin-top: 6px;
		color:#465C5B;
		text-align:center;
		word-break: break-all;
	}

	.contextmenu{
	    width:174px;
	    padding:5px 0;
	    background-color:#fff;
	    border:1px solid #d7dde4;
	    border-radius:6px;
	    box-shadow:2px 2px 3px #aaaaaa;
	    position:absolute;
		z-index: 10;
	}
	.contextmenu-row{
		padding:5px 12px;
		display:flex;
		justify-content:space-between;
		position: relative;
	}
	.contextmenu-row-ul{
		width:124px;
		padding:5px 0;
		position: absolute;
		left:170px;
		top:-5px;
		background-color:#fff;
	    border:1px solid #d7dde4;
	    border-radius:6px;
	    box-shadow:2px 2px 3px #aaaaaa;
	    display: none;
	    text-align: left;
	}
	.contextmenu-row-ul-left{
		left:-120px;
	}
	.contextmenu-row-ul li{
		padding:5px 12px;
	}
	.contextmenu-row-li-select{
		float:right;
		margin-top: -2px;
		color:#06A0FD
	}
	.contextmenu-row-ul li:hover{
		background: #E6F4FF;
	}
	.contextmenu-line{
		width:100%;height: 1px;background:#e3e8ee;margin:3px 0
	}
	.contextmenu-row:hover{
		background: #E6F4FF;
	}
	.contextmenu-row:hover .contextmenu-row-ul{
		display: block;
	}
	.disclick{
		/*cursor:not-allowed;*/
		color:#C7CBD6;
	}
	.icon-color{
		color:#707780!important;
	}
	.file-flex{
		background:#fff;
		padding:32px 18px 32px 60px;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		/*align-items: flex-start;*/  
		position:relative;
		/*min-height: 65vh*/
	}
	/*.file-flex::after{
		content: '';
		flex:1;
	}*/
	.slide-fade-enter-active {
	  transition: all .3s ease;
	}
	.slide-fade-leave-active {
	  /*transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);*/
	}
	.slide-fade-enter, .slide-fade-leave-to
	/* .slide-fade-leave-active for below version 2.1.8 */ {
	  transform: translateX(10px);
	  opacity: 0;
	}

	.file-read{
        position:fixed;
        top:0;
        left:0;
        bottom:0;
        right:0;
        z-index:10000;
        background: rgba(0,0,0,0.6);
    }
    .file-read-wrap{
    	width:80%;
    	height:80%;
    	margin:100px auto;
    	border:1px solid #e3e8ee;
    	background:#fff;
    	overflow:hidden
    }
    .file-read-wrap-expand{
    	width:100%;
    	height:100%;
    	margin:0;
    }
    .file-read-iconsmall{
    	font-size:34px;
    	cursor:pointer;
    	color: #9ea7b4;
    	float:right;
    	line-height: 40px;
    }

</style>
<style>
	.file-search-input1 .ivu-input{
		border:0;
		outline: 0;
		height: 28px!important;
	}
	.file-search-input1 .ivu-input:focus,
	.file-search-input1 .ivu-input:hover 
	{
	    box-shadow: 0 0 0 0 #E1EBFB;
	}
	#upload-file .ivu-upload-drag{
		border: 0!important;
	}
	.file-search-input .ivu-input{
		background:#E1EBFB;
		border:none;
		border-bottom: 1px solid #06A0FD;
		padding-left: 30px;
		border-radius: 0;
	}
	.file-search-input .ivu-input:focus,
	.file-search-input .ivu-input:hover 
	{
	    box-shadow: 0 0 0 2px #E1EBFB;
	}
	.file-table .ivu-table th{
		height:35px!important;
	}
	.file-table .ivu-table td,.file-table .ivu-table th{
		border:0!important;
	}
	.file-dir-name textarea.ivu-input {
	    border:1px solid rgba(6,160,253,0.8);
	    background: rgba(6,160,253,0.1);
	    color:#1c2438;
	}
	.list-file:nth-child(2n+1){
		background: #F2F7FB;
	}
	.list-file:hover{
		background: #ebf7ff;
	}
	.uploads-wrap .ivu-upload-drag{
		border:0!important;
		min-height: 65vh!important;
		cursor: default;
		overflow:visible;
	}
</style>